<template>
  <h1>测试 {{ title }} 的鼠标坐标</h1>
  <h3>Mouse: {{ x }} x {{ y }}</h3>
  <div class="test">
    <el-button type="primary" @click="count++">添加</el-button>
  </div>
  <a>{{ count }}</a>
</template>

<script lang="ts" setup>
const { x, y } = useMouse()

const form = reactive({
  count: 1,
  title: 'test title',
})

let { count, title } = toRefs(form)
title.value = 'vueUse'
</script>

<style lang="scss" scoped>
a {
  color: $test-color;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
